<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">

      <!--表格渲染-->
      <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;">
        <el-table-column type="selection" width="55" />

        <el-table-column prop="invoiceName" label="发票抬头" />
        <el-table-column prop="licenseNumber" label="税号" />
        <el-table-column prop="invoiceType" label="发票类型">
          <template slot-scope="scope">
            {{ scope.row.invoiceType == 1 ? "企业" : '个人、非企业组织' }}
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="联系方式" />

        <el-table-column prop="mailbox" label="电子邮箱" />

        <el-table-column label="商品名称">
          <template slot-scope="scope">
            {{ scope.row.yxStoreCartQueryVo[0].productInfo.storeName }}
          </template>
        </el-table-column>
        <el-table-column label="商品规格">
          <template slot-scope="scope">
            {{ scope.row.yxStoreCartQueryVo[0].productInfo.attrInfo.sku }}
          </template>
        </el-table-column>

        <el-table-column label="商品单价">
          <template slot-scope="scope">
            {{ scope.row.yxStoreCartQueryVo[0].truePrice }}
          </template>
        </el-table-column>
        <el-table-column label="商品数量">
          <template slot-scope="scope">
            {{ scope.row.yxStoreCartQueryVo[0].cartNum }}
          </template>
        </el-table-column>
        <el-table-column label="商品总金额">
          <template slot-scope="scope">
            {{ scope.row.payPrice }}元
          </template>
        </el-table-column>
        row.yxStoreCartQueryVo[0].productInfo.storeName

        <el-table-column prop="orderId" label="订单id" />
        <el-table-column prop="orderId" label="状态">
          <template slot-scope="scope">
            <el-tag v-if="!scope.row.status">待开发票</el-tag>
            <el-tag v-if="scope.row.status" type="success">已开发票</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-upload v-if="!scope.row.status" class="upload-demo" :action="qiNiuUploadApi" :file-list="[]"
              :on-error="handleError" :on-success="(response, file, fileList) => {
          return handleSuccess(response, file, fileList, scope.row);
        }" :headers="headers">
              <el-button size="mini" type="warning">
                邮寄发票</el-button>
            </el-upload>
          </template>
        </el-table-column>

      </el-table>
      <!--分页组件-->
      <pagination />
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import crudYxSystemStore from '@/api/yxSystemStore'
import CRUD, { presenter, header, crud } from '@crud/crud'
import pagination from '@crud/Pagination'
import { getToken } from '@/utils/auth'
import { sendInvoice } from '@/api/invoice'

// crud交由presenter持有
const defaultCrud = CRUD({ title: '门店', url: 'api/yxStoreInvoiceRecords', sort: 'id,desc', crudMethod: { ...crudYxSystemStore } })
export default {
  name: 'YxSystemStore',
  components: { pagination, },
  mixins: [presenter(defaultCrud), header(), crud()],
  computed: {
    ...mapGetters([
      'qiNiuUploadApi'
    ])
  },
  data() {
    return {
      headers: {
        Authorization: getToken(),
      },
    }
  },
  methods: {
    handleError(event) {

      console.log(event, 'event')
    },
    handleSuccess(response, file, fileList, row) {
      console.log(response, row, 'event')
      let data = {
        tos: [row.mailbox],
        invoiceId: row.id,
        subject: `壹捌伍伍(广东)供应链有限公司`,
        content: `<html>
          <head>
            <meta charset="utf-8">
            <title>1855酒类供应链电子发票</title>
          </head>
          <body>
            <div style="font-size: 14px;">
              <br><br><br><br>
              <div style="width: 600px; margin: 0 auto; background-color: rgb(235,93,32); border-radius: 3px;">
                <div style="padding: 0 15px; padding-bottom: 20px;">
                  <div style="height: 50px;padding: 11px 0;">
                    <div>
                      <a style="text-decoration: none;">
                        <img src="https://qny.yijiumy.com/ydd/d18e47c6ddef6fadf9f2a93d290426f.png"
                          style="height: 50px;width: 140px;">
                      </a>
                    </div>
                  </div>
                  <div style="background: #fff; padding: 20px 15px; border-radius: 3px;">
                    <div><span style="font-size: 16px;"> ${row.invoiceName}您好：</span>
                      <div style="line-height: 24px; margin-top: 10px;">
                        <div>您在 <span style="font-weight: bold;">壹捌伍伍</span> <span
                            style="font-weight: bold;">${row.orderId}</span>
                          购买的商品  <span>${row.yxStoreCartQueryVo[0].productInfo.storeName}</span> ,电子发票已经开具成功。
                        </div>
                      </div>
                    </div>
                    <div style="margin: 30px 0;">
                      <div style="width: 100%;">
                        <img src='${response.data[0]}' style="width: 100%;height: 100%;" lazy-load><img>
                      </div>
                    </div>
                    <div style="text-align: center;">
                      <a href="${response.data[0]}" target='_blank' style="text-decoration: none;">
                        <span
                          style="border: rgb(235,93,32) 2px solid;padding: 5px 7px;border-radius: 5px;color:rgb(235,93,32) ; margin: auto;">
                          点击下载电子发票</span>
                      </a>

                    </div>
                    <div style="margin-top: 40px;margin-bottom: 10px;"><span
                        style="font-size: 13px; font-weight: bold; color: #666;">温馨提醒</span>
                      <div style="line-height: 24px; margin-top: 10px;">
                        <div style="font-size: 13px; color: #666;">此为系统邮件,请勿直接回复,谢谢!</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </body>
          </html>`
      }
      sendInvoice(data).then(res => {
        this.crud.toQuery()
      })


      // 处理文件...
    },

  }
}
</script>

<style scoped></style>
